<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>期卷号计算器</title>
</head>

<body>
    <h2>期卷号计算器</h2>

  <label for="startYear">创刊年份：</label>
  <input type="number" id="startYear" placeholder="请输入创刊年份"><br><br>

  <label for="isBiweekly">是否为半月刊：</label><br>
  <input type="radio" id="isBiweeklyYes" name="isBiweekly" value="1">
  <label for="isBiweeklyYes">是</label>
  <input type="radio" id="isBiweeklyNo" name="isBiweekly" value="0">
  <label for="isBiweeklyNo">否</label><br><br>

  <label for="publishDate">出刊日期：</label>
  <input type="text" id="publishDate" placeholder="请输入出刊日期（yyyy/mm/dd 或 yyyy.mm.dd）"><br><br>

  <button onclick="calculate()">计算期卷号</button>

  <p id="result"></p>

  <script>
    function calculate() {
      // 获取用户输入的值
      var startYear = parseInt(document.getElementById('startYear').value);
      var isBiweekly = document.querySelector('input[name="isBiweekly"]:checked').value;
      var publishDateStr = document.getElementById('publishDate').value;
      var publishDateParts;
      // 判断日期格式并拆分
      if (publishDateStr.indexOf('/')!== -1) {
        publishDateParts = publishDateStr.split('/');
      } else if (publishDateStr.indexOf('.')!== -1) {
        publishDateParts = publishDateStr.split('.');
      } else {
        document.getElementById('result').innerHTML = "日期格式错误，请按要求输入！";
        return;
      }
      var publishYear = parseInt(publishDateParts[0]);
      var month = parseInt(publishDateParts[1]);
      var day = parseInt(publishDateParts[2]);

      // 计算卷号
      var volume = publishYear - startYear + 1;

      // 计算期号
      var issue;
      if (isBiweekly === '1') {
        if (day <= 15) {
          issue = (month - 1) * 2 + 1;
        } else {
          issue = month * 2;
        }
      } else {
        issue = month;
      }

      // 显示结果
      document.getElementById('result').innerHTML = "卷号：" + volume + "，期号：" + issue;
    }
  </script>
</body>

</html>